<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    标签分为: 
        块级标签、行级标签、行块标签
  -->
  <!-- 
    块级标签：
      特性：
        1.独占一行
        2.具有盒子属性（宽、高、边框、外边距、内填充）
        3.display:block
      常用的块级标签：  
            div、p、h1-h6、ul、li
  -->
  <h2>块级标签</h2>
  <div style=" 
  width: 500px; 
  height: 50px;
  margin-bottom: 20px;
  background-color: orange;
  padding: 20px;
  "></div>
  <div style=" width: 500px; height: 50px;background-color: pink;"></div>

  <h2>行级标签</h2>
  <!-- 
    行级标签：
      特性：
        1.行级标签之间是可以并排的，可以和行级以及行块标签并排一行
        2.不能设置宽高，宽高是由内容撑起来的
        3.可以设置边框、外边距(支持左右)、内填充(支持左右)，
          外边距和内填充上下渲染会出现问题
        4.display: inline
      常用的行级标签：
          span、img、文本修饰标签
   -->
   <span style="
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
   ">行级标签1</span>
   <span>行级标签2</span>

   <h2>行块标签</h2>
   <!-- 
     行块标签：
        特性:
          1.行级标签之间是可以并排的，可以和行级以及行块标签并排一行
          2.行块可以设置宽、高、以及盒子属性(宽、高、内填充、外边距、边框)
          3.display:inline-block
        总结：行块标签是行级和块级的结合
        常用的行块标签:
          input、button、
    -->
    <!-- 
      注意：在使用行级和行块标签的时候，通常会因为编译器的换行符或者空格造成3-4px的间隙
    -->
    <button style="
      width: 50px;
      height: 50px;
      border: 1px  solid  pink;
      padding: 0px;
      margin: 0px;
    "
    >按钮</button>
    <span style="border: 1px solid black;">文本</span>
</body>
</html>